<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单  'add',-->
        <TableHeader
            :buttons="['refresh', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('user.user.User name') + '/' + t('user.user.nickname') })"
        />
        
        <el-tabs type="border-card" v-model="state.defaultType" @tab-change="typeChange">
            <div v-for="(item, index) in state.type" :key="index">
                <el-tab-pane :label="item.label" :name="item.name"></el-tab-pane>
            </div>
        </el-tabs> 
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />
        <Info />
    </div>
</template>

<script setup lang="ts">
import { ref, provide,reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Info from './info.vue'
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])
/**
 * 示例核心代码(2/3)
 * 表格操作按钮组 optButtons 只是个普通的数组，此处向其 push 一个 OptButton
 */
 optButtons.push(
    {
        render: 'tipButton',
        name: 'info', // name 是任意的
        title: '', // title 是语言翻译 key
        text: '详情',
        type: '',
        icon: '',
        click(row, field) {
            console.log(2112123);
            
            // 在 extend 上自定义一个变量标记详情弹窗显示状态，详情组件内以此判断显示即可！
            baTable.table.extend!.showInfo = true
            baTable.form.items=row
            // 您也可以使用 baTable.form.operate，默认情况它有三个值`Add、Edit、空字符串`，前两个值将显示添加和编辑弹窗
            // 您也可以再来个 loading 态，然后请求详情数据等
            baTable.table.extend!.infoLoading = true
            baTable.table.extend!.infoData = row
            setTimeout(() => {
                baTable.table.extend!.infoLoading = false
            }, 200)
        },
    },
)
defineOptions({
    name: 'user/user',
})
const state = reactive({
    defaultType: '',
    type: [
        { label: '找店人员', name:1 },
        { label: '出租人员', name: 2 },
    ],
})
const { t } = useI18n()
const tableRef = ref()

const baTable = new baTableClass(
    new baTableApi('/admin/user.User/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
            //{ label: t('user.user.User name'), prop: 'username', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('user.user.nickname'), prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            // {
            //     label: t('user.user.grouping'),
            //     prop: 'group.name',
            //     align: 'center',
            //     operator: 'LIKE',
            //     operatorPlaceholder: t('Fuzzy query'),
            //     render: 'tag',
            // },
            { label: t('user.user.head portrait'), prop: 'avatar', align: 'center', render: 'image', operator: false },
            {
                label: t('user.user.Gender'),
                prop: 'gender',
                align: 'center',
                render: 'tag',
                custom: { '0': 'info', '1': '', '2': 'success' },
                replaceValue: { '0': t('Unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
            },
            { label: t('user.user.mobile'), prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('user.user.Last login IP'),
                prop: 'last_login_ip',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tag',
            },
            {
                label: t('user.user.Last login'),
                prop: 'last_login_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                width: 160,
            },
            { label: t('Create time'), prop: 'create_time', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
          
            {
                label: t('Operate'),
                align: 'center',
                width: '150',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: {
            gender: 0,
            money: '0',
            score: '0',
            status: 'enable',
        },
    }
)

const typeChange = (name) => {
    baTable.table.filter!.search = [{ field: 'role_type', val: name, operator: 'FIND_IN_SET' }]
    baTable.getIndex()
    if (state.defaultType == 'fangyuan') {
        baTable.table.column[1].show = true
    } else {
        baTable.table.column[1].show = false
    }
    state.defaultType = name
    baTable.form.items!.catetype=name
    baTable.form.defaultItems.catetype=name
}
baTable.mount()
baTable.getIndex()
if( state.defaultType){
    baTable.table.filter!.search = [{ field: 'role_type', val: state.defaultType, operator: 'FIND_IN_SET' }]
}
provide('baTable', baTable)
</script>

<style scoped lang="scss">
:deep(.el-tabs__content) {
    display: none;
}
</style>
